<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style>
    h1{
        text-align: center;
        font-weight:bold;
        font-size:30px;
        color: darkturquoise;
        margin-top: 8px;
        margin-bottom:15px;
        /*font-family:"STXinwei";*/
    }
    .shij_p{
        font-size: 18px;
        font-weight: bold;
        display:inline-block;
        margin-left: 10px;
    }
    .kuang_input{
        width:230px;
        height:30px;
        border: 2px solid #45b97c;
        border-radius: 6px;
        font-size: 15px;
    }

</style>
<body style="background: #FBFBFB">
    <h1>用户登录日志功能</h1>

    <div style="font-size: 10px">
        <table id="CustomerLoginLog-tab" lay-filter="test"></table>
    </div>

    <script id="tab-toolbar" type="text/html">
        <p class="shij_p">用户登录时间：</p>
        <input type="date" class="kuang_input" id="startTime">~
        <input type="date" class="kuang_input" id="endTime">
        <p class="shij_p">用户登录ID：</p>
        <input type="text" class="kuang_input" id="customerId" placeholder="请输入用户登录ID">
        <button class="layui-btn layui-btn-normal" lay-event="search">查询</button>
        <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
    </script>

    <script src="../../style/layui-v2.5.6/layui/layui.js"></script>
    <script type="text/javascript" src ="../../style/js/jquery-3.3.1.js"></script>
    <script>
        // 加载layui模块
        layui.use(['form', 'layer', 'table'], function () {
            var form = layui.form;
            var layer = layui.layer;//弹出层
            var table = layui.table;//表格
            table.render({
                elem: '#CustomerLoginLog-tab'
                , height: 520
                , url: '../../CustomerLoginLog/selCustomerLoginLog.do' //数据接口
                , toolbar: "#tab-toolbar"
                ,skin:'line'//边框风格
                , page: true //开启分页
                , cols: [[ //表头
                    {checkbox: true},
                    {field: 'login_id', title: '登录日志ID', width: 270, sort: true}
                    ,{field: 'customer_id', title: '登录用户ID', width: 270, sort: true,}
                    ,{field: 'login_time', title: '用户登录时间', width: 250, sort: true,}
                    ,{field: 'login_ip', title: '登录IP', width: 250, sort: true,}
                    ,{field: 'login_type', title: '登录类型', width: 200, sort: true,templet:function(d){
                        //登录类型
                        if(d.login_type==0)
                        return "未成功";
                        return "成功";
                }}
                ]]
            });

            // 监听表头工具栏
            //监听事件 test是表格的lay-filter值
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'search':
                        // 获取日期框中的值
                        table.reload("CustomerLoginLog-tab",{
                            where:{"startTime":$("#startTime").val(),
                                "endTime":$("#endTime").val(),
                                "customerId":$("#customerId").val()}
                        });
                        break;

                    case 'delete':
                        // 获取选中的行对象
                        var data = table.checkStatus("CustomerLoginLog-tab").data;
                        // 把多个id拼接
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids += data[i].login_id + ",";
                        }
                        // 调用ajax到后台执行删除
                        $.ajax({
                            type: "post",
                            url: "../../CustomerLoginLog/delCustomerLoginLog.do",
                            data: {"ids": ids},
                            dataType: "json",
                            success: function (data) {
                                layer.msg(data.msg);
                                table.reload("CustomerLoginLog-tab");
                            }
                        });
                        break;
                }

            });
        });
    </script>
</body>
</html>
